<script setup >
import {useRoute,useRouter} from "vue-router";
import axios from 'axios'
const route = useRoute()
const router = useRouter()
const query = JSON.parse(route.query.item);
const userId = query.userId//window.localStorage.getItem('user_id')
console.log(userId)
const recs =ref([])
const getRec = ()=>{
  axios.post("http://localhost:8000/log/recommend",{user_id:userId})
      .then(res=>{
        let data = res.data
        if(data.code === 200){
          console.log(data.data)
          recs.value = data.data
        }
  })

}
const go = (item)=>{
  // let userId = localStorage.getItem('user_id')
  item.userId = userId
  router.push({
    path:'/user/sportview',
    query:{item:JSON.stringify(item)}
  }).then(()=>{
      router.push({
    path:'/user/sportdetail',
    query:{item:JSON.stringify(item)}
  })
  })

  // const
  // location.reload()
}
getRec()
const send = ()=>{
  let payload = {
    user_id: +userId,
    sport_id: +query.id
  }
  axios.post('http://localhost:8000/log/add_one',payload)
}
send()

</script>

<template>
<div class="w-full h-full">
  <div class="w-2/3 m-auto mt-10">
      <div class="text-3xl " >
    {{query.name}}
      </div>
    <div v-html="query.content">

    </div>
  </div>
  <div class="fixed top-20  ">
    <h1 class="text-2xl font-bold">
      资讯推荐
    </h1>
    <div class="flex flex-col-reverse " style="max-width: 200px;max-height: 400px;overflow-y: scroll;">
      <div  class="mt-10" v-for="item in recs" :key="item.id">
        <el-card  class="w-full h-full rounded-2xl hover:cursor-pointer " @click="()=>{go(item)}">
        <img :src="item.pic" style="width: 100%;height: 200px">
        <div class="flex justify-around mt-3">
          <span class="text-xl">
          {{item.name}}
          </span>
          <el-tag>
            {{item.cate}}
          </el-tag>
        </div>
      </el-card>
      </div>
    </div>
  </div>


</div>
</template>

<style scoped>

</style>